<template>
  <el-form ref="baseForm" label-width="110" :rules="rule" :model="value">
    <el-form-item label="标签" prop="labels" >
      <el-tag class="tagDivision" v-for="(item,index) in articleTags" :key="index"
              closable
              @close="deleteTagHandler(item)"
      >
        {{ item }}
      </el-tag>
      <el-input class="inputTag"
                size="small"
                ref="inputTag"
                v-if="inputTagVisible && enableTag" v-model="inputTagValue"
                @keyup.enter="inputTagHandler"
                @focusout="inputTagHandler"
      ></el-input>
      <el-button v-if="!inputTagVisible && enableTag"
                 size="small"
                 @click="showInputTagHandler">添加标签</el-button>
    </el-form-item>
    <el-form-item label="添加封面" prop="coverUrl">
      <upload-image v-model="value.coverUrl"/>
    </el-form-item>
    <el-form-item label="文章摘要" prop="summarize">
      <el-input v-model="value.summarize"
                type="textarea"
                maxlength="250"
                show-word-limit
      />
    </el-form-item>
    <el-form-item label="文章分类专栏" prop="classifications">
      <el-select v-model="value.classifications"
                 style="width: 100%;"
      >
        <el-option v-for="item in classificationOptions" :key="item.id" :label="item.name" :value="item.name"/>
      </el-select>
    </el-form-item>
    <el-form-item label="文章类型" prop="type">
      <el-radio-group v-model="value.type">
        <el-radio label="ORIGINAL">原创</el-radio>
        <el-radio label="REPRINT">转载</el-radio>
        <el-radio label="TRANSLATE">翻译</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script>
import { nextTick, ref } from 'vue'
import { classificationMenuList } from '@/api/classification'

export default {
  name: 'ArticleBaseInfoForm',
  props: ['modelValue'],
  computed: {
    value: {
      get () {
        return this.modelValue
      },
      set (value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  setup () {
    return {
      articleTags: ref([]),
      inputTagVisible: ref(false),
      inputTagValue: ref(''),
      type: ref(),
      enableTag: ref(true),
      classificationOptions: ref({}),
      articleInfo: ref({
        headline: '',
        coverUrl: '',
        summarize: '',
        content: '',
        type: 'ORIGINAL',
        classifications: '',
        labels: ''
      }),
      rule: {
        headline: [
          { required: true, message: '请输入账号名', trigger: 'blur' }
        ],
        labels: [
          { required: true, message: '请输如', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入账号名', trigger: 'blur' }
        ],
        classifications: [
          { required: true, message: '请选择文章所在专栏', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getOptionedTags () {
      return ':' + this.articleTags.join(':') + ':'
    },
    // 插入新的标签
    inputTagHandler (val) {
      console.log(val)
      if (this.inputTagValue) {
        this.articleTags.push(this.inputTagValue)
        this.value.labels = this.getOptionedTags()
        if (this.articleTags.length >= 5) {
          this.enableTag = false
        }
      }
      this.inputTagVisible = false
      this.inputTagValue = ''
    },
    // 显示标签输入框
    showInputTagHandler () {
      this.inputTagVisible = true
      nextTick(() => {
        this.$refs.inputTag.input.focus()
      })
    },
    // 删除标签
    deleteTagHandler (val) {
      this.articleTags.splice(this.articleTags.indexOf(val), 1)
      this.value.labels = this.getOptionedTags()
      if (this.articleTags.length < 5) {
        this.enableTag = true
      }
    },
    getClassificationMenuList () {
      classificationMenuList().then(val => {
        this.classificationOptions = val.data
      })
    }
  },
  mounted () {
    this.getClassificationMenuList()
  }
}
</script>

<style scoped>
.inputTag{
  width: 73px;
}
.tagDivision{
  margin-right: 5px;
}
</style>
